<template>
	<view class="delivery-address-wrapper">
		<view class="main">
			<radio-group class="radio-group" v-if="reDraw">
				<block v-for="(item, index) in addressList" :key="index">
					<view class="address">
						<view class="personal" @tap="selAddrToOrder" :data-addrid="item.addrId">
							<view class="info-tit">
								<text class="name">{{item.receiver}}</text>
								<text class="tel">{{item.mobile}}</text>
								<image src="/static/images/icon/revise.png" @tap.stop="toEditAddress"
									:data-addrid="item.addrId"></image>
							</view>
							<view class="addr">
								<text class="addr-get">{{item.province}}{{item.city}}{{item.area}}{{item.addr}}</text>
							</view>
						</view>
						<view class="select-btn">
							<view class="box">
								<label @tap="onDefaultAddr" :data-addrid="item.addrId">
									<radio :checked="item.commonAddr==1" color="#e43130"></radio>
									{{i18n.asDefaultAddress}}
								</label>
							</view>
						</view>
					</view>
				</block>
			</radio-group>
		</view>
		<view class="footer" @tap="onAddAddr">
			<text>{{i18n.addNewAddress}}</text>
		</view>


		<!-- 列表为空 -->
		<view class="empty" v-if="addressList.length==0">
			<view class="empty-icon">
				<image src="/static/images/icon/empty-dot.png"></image>
			</view>
			<view class="empty-text">{{i18n.noShippingAddress}}</view>
		</view>

	</view>
</template>

<script>
	var http = require("@/utils/http.js");

	export default {
		data() {
			return {
				defaultSize: 'mini',
				disabled: false,
				plain: true,
				loading: false,
				addressList: [],
				addAddress: '',
				order: -1,
				item: "",
				selAddress: "",
				reDraw: true
			};
		},

		components: {},
		props: {},
		computed: {
			i18n() {
				return this.$t('index')
			}
		},

		onLoad: function(option) {
			if (option.order) {
				this.setData({
					order: option.order
				});
			}
		},
		//加载地址列表
		onShow: function() {
			// 加载导航标题
			uni.setNavigationBarTitle({
				title: this.i18n.shippingAddress
			});
			this.getAddrList()
		},
		methods: {

			/**
			 * 获取收货地址列表
			 */
			getAddrList: function() {
				uni.showLoading();
				this.reDraw = false
				var params = {
					url: "/p/address/list",
					method: "GET",
					callBack: (res) => {
						this.setData({
							addressList: res,
							reDraw: true
						});
						uni.hideLoading()
					}
				};
				http.request(params);
			},

			/**
			 * 新增收货地址
			 */
			onAddAddr: function(e) {
				if (this.addressList.length == 10) {
					uni.showToast({
						title: this.i18n.addNewAddressTips,
						icon: 'none'
					})
				} else {
					uni.navigateTo({
						url: '/packageUser/pages/editAddress/editAddress'
					});
				}
			},
			/**
			 * 设置为默认地址
			 */
			onDefaultAddr: function(e) {
				var addrId = e.currentTarget.dataset.addrid;
				uni.showLoading();
				var params = {
					url: "/p/address/defaultAddr/" + addrId,
					method: "PUT",
					callBack: (res) => {
						uni.hideLoading()
						this.getAddrList()
					}
				};
				http.request(params);
			},

			/**
			 * 修改地址
			 */
			toEditAddress: function(e) {
				var addrId = e.currentTarget.dataset.addrid;
				uni.navigateTo({
					url: '/packageUser/pages/editAddress/editAddress?addrId=' + addrId
				});
			},

			/**
			 * 选择地址 跳转回提交订单页
			 */
			selAddrToOrder: function(e) {
				let id = e.currentTarget.dataset.addrid
				let item = null
				this.addressList.forEach(addrItem => {
					if (addrItem.addrId == id) {
						item = addrItem
					}
				})

				if (this.order == 0) {
					var pages = getCurrentPages(); //当前页面
					var prevPage = pages[pages.length - 2]; //上一页面
					prevPage.item = item
					prevPage.selAddress = 'yes'
					//返回
					uni.navigateBack({
						delta: 1
					});
				}
			},
		}
	};
</script>
<style lang="scss">
	page {
		background-color: #f4f4f4;
		border-top: 2rpx solid #e9eaec;
		padding-bottom: 150rpx;
	}

	.delivery-address-wrapper {
		.main {
			margin-bottom: 20rpx;
		}

		.address {
			margin-bottom: 15rpx;
			width: 100%;
			background-color: #fff;
			border-bottom: 2rpx solid #e9eaec;

			.personal {
				position: relative;
				padding: 20rpx 30rpx;
				border-bottom: 3rpx dashed #e9eaec;


				.info-tit {
					margin: 10rpx 0;

					.name {
						margin-right: 30rpx;
						font-size: 32rpx;
						max-width: 90%;
						display: inline-block;
						word-break: break-all;
					}

					.tel {
						font-size: 30rpx;
					}

					image {
						position: absolute;
						right: 30rpx;
						top: 20rpx;
						width: 40rpx;
						height: 40rpx;
						margin-left: 50rpx;
						vertical-align: middle;
					}
				}


				.addr {
					font-size: 28rpx;
					margin: 10rpx 0;
					margin-top: 20rpx;

					.addr-get {
						display: inline-block;
						color: #999999;
						width: 100%;
						word-break: break-word;
					}
				}
			}

			.select-btn {
				padding: 20rpx 30rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.box {
					font-size: 28rpx;
				}
			}
		}

		.footer {
			position: fixed;
			bottom: 0;
			width: 100%;
			height: 100rpx;
			line-height: 100rpx;
			text-align: center;
			background-color: #fff;
			box-shadow: 0 -1rpx 8rpx rgba(0, 0, 0, 0.05);

			text {
				font-size: 32rpx;
				color: #e43130;
			}
		}

		.empty {
			.img {
				text-align: center;
				margin-top: 130rpx;

				image {
					width: 100rpx;
					height: 100rpx;
					display: block;
					margin: auto;
				}
			}

			.txt {
				margin-top: 30rpx;
				font-size: 24rpx;
				text-align: center;
				color: #999;
			}
		}


		/* 列表为空 */
		.empty {
			margin-top: 100rpx;
			text-align: cneter;


			.empty-icon {
				display: block;
				width: 80rpx;
				height: 80rpx;
				margin: 0 auto;
				margin-bottom: 20rpx;
			}

			.empty-icon>image {
				width: 100%;
				height: 100%;
			}

			.empty-text {
				font-size: 28rpx;
				text-align: center;
				color: #999;
				line-height: 2em;
			}
		}
	}
</style>
